<template>
	<div class="login f14">
		<div class="login-left"></div>
		<div class="login-right">
			<div class="login-box">
				<div class="login-text">
					<div class="login-title">欢迎登录</div>
					<!-- <div class="f16 login-t">主题知识库</div> -->
				</div>
				<div class="login-content">
					<div class="login-deng">
						<div :class="{ active: active == 'password' }" class="login-hover" @click="menu('password')">
							密码登录
						</div>
						<!-- <div :class="{ active: active == 'phone' }" class="login-hover" @click="menu('phone')">
							手机号登录
						</div> -->
					</div>
					<div class="login-denglu">
						<el-form :model="form">
							<el-form-item label="">
								<el-input
									v-model="form.username"
									placeholder="请输入用户名或手机号"
									class="login-input"
									v-if="active == 'password'"
									@focus="focus('password')"
									@blur="blur('password')"
								>
									<template #prefix>
										<img
											src="@/assets/image/login/yhm1.png"
											class="input-icon"
											alt=""
											v-if="!inputIconUsername"
										/>
										<img src="@/assets/image/login/yhm2.png" class="input-icon" alt="" v-else />
										<div class="login-hr">|</div>
									</template>
								</el-input>
								<el-input
									v-model="form.username"
									placeholder="请输入手机号"
									class="login-input"
									v-else
									@focus="focus('password')"
									@blur="blur('password')"
								>
									<template #prefix>
										<img
											src="@/assets/image/login/shouji1.png"
											class="input-icon"
											alt=""
											v-if="!inputIconUsername"
										/>
										<img src="@/assets/image/login/shouji2.png" class="input-icon" alt="" v-else />
										<div class="login-hr">|</div>
									</template>
								</el-input>
							</el-form-item>
							<el-form-item label="">
								<el-input
									v-model="form.password"
									placeholder="请输入密码"
									type="password"
									show-password
									@keyup.enter.native="onSubmit"
									class="login-input"
									v-if="active == 'password'"
									@focus="focus('phone')"
									@blur="blur('phone')"
								>
									<template #prefix>
										<img
											src="@/assets/image/login/mima1.png"
											class="input-icon"
											alt=""
											v-if="!inputIconPassword"
										/>
										<img src="@/assets/image/login/mima2.png" class="input-icon" alt="" v-else />
										<div class="login-hr">|</div>
									</template>
								</el-input>
								<el-input
									v-model="form.password"
									placeholder="验证码"
									type="password"
									@keyup.enter.native="onSubmit"
									class="login-input"
									@focus="focus('phone')"
									@blur="blur('phone')"
									v-else
								>
									<template #prefix>
										<img
											src="@/assets/image/login/yanzhengma1.png"
											class="input-icon"
											alt=""
											v-if="!inputIconPassword"
										/>
										<img
											src="@/assets/image/login/yanzhengma2.png"
											class="input-icon"
											alt=""
											v-else
										/>
										<div class="login-hr">|</div>
									</template>
									<template #suffix>
										<div :class="{ loginCode: inputIconPassword }" @click.prevent="yanZhengMa">
											获取验证码
										</div>
									</template>
								</el-input>
							</el-form-item>
							<div class="login-agreement" v-if="title != ''">
								<div>
									<el-checkbox v-model="checked" class="login-checked" />
								</div>
								<div>点击登录即代表同意&nbsp;</div>
								<div class="ctheme" @click.stop="agreement">《{{ title }}》</div>
							</div>
							<el-form-item>
								<el-button type="primary" @click="onSubmit" class="onSubMit">登录</el-button>
							</el-form-item>
						</el-form>
					</div>
					<!-- <div class="thirdLine">
						<el-divider>第三方登录</el-divider>
					</div>
					<div class="login-bottom">
						<img src="@/assets/image/login/right-wx.png" alt="" class="login-icon login-icon1" />
						<img src="@/assets/image/login/right-qw.png" alt="" class="login-icon" />
					</div> -->
				</div>
			</div>
		</div>
		<!-- <div class="main">
			<div class="f20 fbold denglu">欢迎登录</div>
			<div class="subTitle">知识管理平台</div>
			<el-form :model="form" label-width="">
				<el-form-item label="">
					<el-input v-model="form.username" placeholder="用户名">
						<template #prefix>
							<img src="@/assets/image/login/name.png" class="input-icon" alt="" />
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="">
					<el-input
						v-model="form.password"
						placeholder="密码"
						type="password"
						show-password
						@keyup.enter.native="onSubmit"
					>
						<template #prefix>
							<img src="@/assets/image/login/pwd.png" class="input-icon" alt="" />
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="">
					<el-checkbox v-model="form.checked1" label="下次自动登录" size="large" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">登录</el-button>
				</el-form-item>
				<div class="center f14 ca1">
					点击登录即代表同意
					<div class="ctheme" @click.stop="agreement">《{{ title }}》</div>
				</div>
			</el-form>
		</div> -->
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus"
import { useUserInfoStore } from "/store/userInfo"
const userInfoStore = useUserInfoStore()
const router = useRouter()
const title = ref("")
const form = reactive({
	username: "admin",
	password: "admin",
})
const inputIconUsername = ref(false)
const inputIconPassword = ref(false)
const checked = ref(false)
const active = ref("password")
const onSubmit = async () => {
	if (form.username == "") {
		return ElMessage.error("请输入用户名")
	} else if (form.password == "") {
		return ElMessage.error("请输入密码")
	}

	if (title.value == "") {
		try {
			await toLogin()
		} catch (error) {
			ElMessage.error(error)
		}
		return
	}

	if (!checked.value) {
		try {
			await ElMessageBox.confirm(`是否同意${title.value}?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
			checked.value = true
		} catch (error) {
			return
		}
	}
	try {
		await toLogin()
	} catch (error) {
		// ElMessage.error(error)
	}
}

async function toLogin() {
	await userInfoStore.login(form)
	window.triggerReload()
	router.push("/")
}
async function getData() {
	const res = await getAxios(`/api/api/system/protocol/getByCode?code=USER`)
	if (res) {
		title.value = res.title
	}
}
getData()
const agreement = () => {
	window.open("/privacy")
}
const menu = val => {
	active.value = val
	form.username = ""
	form.password = ""
	inputIconUsername.value = false
	inputIconPassword.value = false
}
const focus = val => {
	if (val == "password") {
		inputIconUsername.value = true
	} else {
		inputIconPassword.value = true
	}
}
const blur = val => {
	if (val == "password") {
		inputIconUsername.value = false
	} else {
		inputIconPassword.value = false
	}
}
//验证码
const yanZhengMa = () => {
	return
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
// .login {
// 	background: url(@/assets/image/login/back.png) center;
// 	background-size: cover;
// 	:deep(.el-input__prefix-inner > :last-child) {
// 		margin-right: 10px;
// 	}

// 	.input-icon {
// 		width: 15px;
// 		height: auto;
// 	}

// 	:deep(.el-checkbox.el-checkbox--large) {
// 		height: auto;
// 		padding: 0 0 15px 16px;
// 	}

// 	:deep(.el-checkbox__label) {
// 		color: #3a405b;
// 	}

// 	:deep(.el-button--primary) {
// 		width: 400px;
// 		height: 40px;
// 		background: #075eff;
// 		border-radius: 30px;
// 	}

// 	:deep(.el-form-item--default) {
// 		margin-bottom: 20px;
// 	}

// 	:deep(.el-input__wrapper) {
// 		width: 400px;
// 		height: 40px;
// 		border-color: #e3e8f0;
// 		border-radius: 30px;
// 		padding: 0 25px;
// 	}

// 	.subTitle {
// 		padding: 20px 0 30px;
// 	}

// 	.main {
// 		background: url(@/assets/image/login/login.png) center;
// 		background-size: cover;
// 		width: 100%;
// 		height: 100%;
// 		width: 800px;
// 		height: 500px;
// 		padding: 70px 80px 90px 400px;
// 		@include maxWidth(1024) {
// 			background: #fff;
// 			width: 600px;
// 			padding: 50px 80px 50px 100px;
// 		}
// 		@include maxWidth(768) {
// 			background: #fff;
// 			width: 400px;
// 			padding: 40px 60px 40px 80px;
// 		}
// 		@include maxWidth(500) {
// 			background: #fff;
// 			width: 300px;
// 			padding: 50px 40px 50px 40px;
// 		}
// 		.denglu {
// 			display: flex;
// 			justify-content: center;
// 		}
// 	}
// }
// .ctheme {
// 	cursor: pointer;
// }
.login {
	display: flex;
	height: 100vh;
	@include maxWidth(1024) {
		position: relative;
	}
	.login-left {
		background: url(@/assets/image/login/left-bg1.png) no-repeat center bottom;
		background-size: cover;
		width: 45%;
		height: 100%;
		@include maxWidth(1300) {
			width: 50%;
		}
		@include maxWidth(1200) {
			width: 55%;
		}
		@include maxWidth(1024) {
			position: absolute;
			width: 100%;
			background: url(@/assets/image/login/left-bg2.png) no-repeat center bottom;
		}
	}
	.login-right {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.login-box {
			position: absolute;
			margin-top: 30px;
			width: 600px;
			height: 600px;
			box-shadow: 0 0 10px #ccc;
			border-radius: 10px;
			padding: 50px;
			@include maxWidth(1450) {
				width: 500px;
			}
			@include maxWidth(1300) {
				width: 480px;
			}
			@include maxWidth(1100) {
				width: 450px;
			}
			@include maxWidth(1024) {
				background-color: #fff;
				opacity: 0.95;
			}
			@include maxWidth(500) {
				width: 400px;
			}
			@include maxWidth(420) {
				width: 380px;
			}
			@include maxWidth(400) {
				padding: 55px;
				width: 350px;
				padding: 50px 20px;
			}
			.login-text {
				position: absolute;
				display: flex;
				top: -70px;
				left: 20px;
				line-height: 1;
				.login-title {
					font-size: 26px;
					font-weight: 700;
					margin-right: 20px;
					@include maxWidth(1024) {
						color: #fff;
					}
				}
				.login-t {
					display: flex;
					align-items: flex-end;
					@include maxWidth(1024) {
						color: #fff;
					}
				}
			}
			.login-content {
				.login-deng {
					display: flex;
					font-size: 18px;
					div {
						cursor: pointer;
						margin-right: 50px;
						padding-bottom: 10px;
						color: #999;
					}
					.active {
						color: #000;
						border-bottom: 2px solid #075eff;
					}
					.login-hover {
						&:hover {
							color: #000;
							border-bottom: 2px solid #075eff;
						}
					}
				}
				.login-denglu {
					margin-top: 50px;

					.login-input {
						height: 50px;
						:deep(.el-input__wrapper) {
							padding: 1px 20px;
						}
						.input-icon {
							width: 20px;
						}
						.login-hr {
							margin: 0 20px 0 10px;
						}
						.loginCode {
							color: #075eff;
							cursor: pointer;
						}
					}
					.login-agreement {
						display: flex;
						margin-top: 30px;
						color: #999;
						.login-checked {
							display: block;
							padding-top: 2px;
							margin-right: 10px;
						}
						.ctheme {
							cursor: pointer;
						}
					}
					.onSubMit {
						width: 100%;
						height: 50px;
						margin-top: 30px;
						border-radius: 50px;
					}
				}
				.thirdLine {
					margin: 40px 0;
				}
				.login-bottom {
					display: flex;
					justify-content: center;
					.login-icon {
						width: 40px;
						cursor: pointer;
					}
					.login-icon1 {
						margin-right: 50px;
					}
				}
			}
		}
	}
}
</style>
